<!DOCTYPE html>
<html>
<head>
    <title>新手学堂文章信息</title>
	<#include "/header.html">
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.0.min.js"></script>
</head>
<body>
<style>
    th{
        text-align: center;
    }
</style>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <div class="grid-btn">
            <div style="float: left">
                <select class="form-control" v-model="q.gzhCode">
                    <option value="">全部平台</option>
                    <option v-for="gzh in userGzhList" :value="gzh.gzhCode">{{gzh.gzhName}}</option>
                </select>
            </div>
            <p style="float: left">&nbsp;</p>
            <div style="float: left">
                <input type="text" class="form-control" v-model="q.articleId" @keyup.enter="query" placeholder="文章ID">
            </div>
            <p style="float: left">&nbsp;</p>
            <a class="btn btn-default" @click="query">查询</a>
            <p style="float: left">&nbsp;</p>
            <a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
            <a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
        </div>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>

    <div v-show="!showList" class="panel panel-default">
        <div class="panel-heading">{{title}}</div>
        <form class="form-horizontal">
            <div class="form-group">
                <div class="col-sm-2 control-label">ID</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="bBeginnerArticleInfo.id" placeholder="ID" readonly/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">公众号</div>
                <div class="col-sm-10">
                    <select class="form-control" v-model="bBeginnerArticleInfo.gzhCode" onchange="vm.modifyArticleType(this)">
                        <option value="">请选择</option>
                        <option v-for="gzh in userGzhList" :value="gzh.gzhCode">{{gzh.gzhName}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">标签</div>
                <div class="col-sm-10">
                    <select class="form-control" v-model="bBeginnerArticleInfo.articleTypeId">
                        <option value="">请选择</option>
                        <option v-for="articleTypeId in articleTypeIdList" :value="articleTypeId.id">{{articleTypeId.name}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">文章ID</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" onblur="vm.validateArticle(this)" v-model="bBeginnerArticleInfo.articleId" onkeypress="return inputNumber(event)" placeholder="文章ID"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">文章名称</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="articleTitle" v-model="bBeginnerArticleInfo.articleTitle" placeholder="文章名称" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">文章缩略图</div>
                <div class="col-sm-10">
                    <img id="articleImgUrl" :src="bBeginnerArticleInfo.articleImgUrl" width="200px" height="200px" style="margin-bottom: 6px" />
                    <input type="file" style="width: 200px;" accept="image/*" onchange="inserttx(this)"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">访问路径</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="bBeginnerArticleInfo.accessUrl" placeholder="访问路径" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">状态</div>
                <div class="col-sm-10">
                    <label class="radio-inline">
                        <input type="radio" name="status" value="1" v-model="bBeginnerArticleInfo.status"  /> 显示
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="status" value="0" v-model="bBeginnerArticleInfo.status" /> 隐藏
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">排序</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="bBeginnerArticleInfo.sort"  onkeypress="return inputNumber(event)" placeholder="排序"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">创建时间</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="bBeginnerArticleInfo.createTime" placeholder="创建时间" readonly />
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">修改时间</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="bBeginnerArticleInfo.modifyTime" placeholder="修改时间" readonly />
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
                &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
            </div>
        </form>
    </div>
</div>

<script src="${request.contextPath}/statics/js/modules/sys/bbeginnerarticleinfo.js?_${.now?long}"></script>
<script>
    function inserttx(e) {
        var files = e.files;
        var length = files.length;
        console.log("选择了" + length + "张图片");
        upload(files[0]);
    }

    function upload(file, pathname = 'article') {
        let base_directory = "beginner/";
        console.log(file);
        const client = new window.OSS({
            region: 'oss-cn-shenzhen', // hangzhou, shanghai, shenzhen
            accessKeyId: 'LTAI4Fh7PnYLw3uQvoUYiazS',
            accessKeySecret: 'cEw7e8QMz0h4XY4qmzCoTzhHITqyUU',
            bucket: 'zktuistatic'
        });
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        var datePath =year+""+month+""+day;
        var key = "";
        key=base_directory+pathname+"/"+datePath+"/"+guid()+getFileExtendingName(file.name);
        client.put(key, file).then(function () {
            return client.get(key);
        }).then(function(ret) {
            if(ret.res.status==200 && ret.res.statusCode==200) {
                console.log(ret.res.requestUrls[0]);
                vm.bBeginnerArticleInfo.articleImgUrl=ret.res.requestUrls[0].replace("http:","https:");
                $("#articleImgUrl").attr("src", vm.bBeginnerArticleInfo.articleImgUrl);
            }
        }).catch(function(err) {
            console.log(err);
        });
    }

    function getFileExtendingName (filename) {
        // 文件扩展名匹配正则
        var reg = /\.[^\.]+$/;
        var matches = reg.exec(filename);
        if (matches) {
            return matches[0];
        }
        return '';
    }

    function guid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
            return v.toString(16);
        });
    }
    
    function inputNumber(event) {
        if(event.keyCode<48 || event.keyCode>57){　　//判断keyCode码
            return false;
        }
    }
</script>
</body>
</html>